{% extends "baseTemp/base_no_cart.html" %}
{% load staticfiles %}

{# 标题描述 #}
{% block title %}
	<title>天天生鲜-购物车</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
{% endblock title %}

{# 自定义引入的外部资源 #}
{% block resource_link %}
	<style>
		.sku_sub{
			display: block;
			background: rgba(0,0,0,0);
			width: 100%;
			height: 100%;
			outline: none;
			font-size: 24px;
			color: #fff;
		}
	</style>
{% endblock resource_link %}

{# 搜索栏标题 #}
{% block page_title %}购物车{% endblock page_title %}


{# 主体 #}
{% block body %}
	<div id="vue-dom">
		<div class="total_count">全部商品<em ref='sku_count_all'>{{ sku_nums }}</em>件</div>
		<ul class="cart_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>
			<li class="col06">操作</li>
		</ul>
		{% for sku in skus %}
		<form action="{% url 'order:order_place' %}" method="post">
			{% csrf_token %}
			<ul class="cart_list_td clearfix" ref="{{ sku.id }}-ul">
				{# 从这里获取sku.id信息 #}
				<li class="col01" data-sku-id="{{ sku.id }}" ref="{{ sku.id }}-id">
					<input type="checkbox" value="{{ sku.id }}" v-model="checkedNames" @change='total_sku_price()' name="sku_ids">
				</li>
				<li class="col02"><a href="{% url 'commod:detail' sku.id %}"><img src="{{ sku.image.url }}"></a></li>
				<li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li>
				<li class="col04">{{ sku.unite }}</li>
				<li class="col05" ref="{{ sku.name }}">{{ sku.price }}元</li>
				<li class="col06">
					<div class="num_add">
						<a href="javascript:;" class="add fl" data-alter="{{ sku.id }}" @click.prevent="num_add_or_minus">+</a>
						<input type="text" class="num_show fl" value="{{ sku.count }}" @blur='num_add_or_minus' data-alter="{{ sku.id }}" ref="{{ sku.id }}-count">
						<a href="javascript:;" class="minus fl" data-alter="{{ sku.id }}" @click.prevent="num_add_or_minus">-</a>
					</div>
				</li>
				<li class="col07">{{ sku.amount }}元</li>

				<li class="col08"><a href="javascript:;" data-sku-del="{{ sku.id }}" @click.prevent="sku_cart_del">删除</a></li>
			</ul>
		{% endfor %}


		<ul class="settlements">
			<li class="col01">
				<input type="checkbox" id="checkbox" v-model="checked" @change="check_all()">
			</li>
			{# 在这里获取token #}
			<li class="col02">全选</li>
			<li class="col03">合计(不含运费)：
				<span>¥</span><em ref='total_price'>0.00</em>
				<br>
				共计<b ref='total_skus'>0</b>件商品</li>
			<li class="col04"><a href="javascript:;"><input type="submit" value="去结算" class="sku_sub"></a></li>
		</ul>
		</form>
		{# 用作转换全选数组的JSON字符串 #}
		<div style="display: none;" ref='sku_ids' data-token="{{ csrf_token }}">{{ sku_ids }}</div>
	</div>
{% endblock body %}

{% block script %}
	<script src="{% static "js/vue.min.js" %}"></script>
	<script src="{% static "js/vue-resource.min.js" %}"></script>
	<script src="{% static "js/cart.js" %}"> </script>
{% endblock script %}
